import { router } from "@/router";
import { App, Directive, DirectiveBinding } from "vue";
import { checkPermission } from "@/utils/sys/permission";

/**
 * 权限指令（适用于前端和后端权限控制模式）
 *
 * 支持多种用法：
 * 1. 单个权限：<el-button v-auth="'wms:item:add'">新增</el-button>
 * 2. 多个权限（OR逻辑）：<el-button v-auth="['wms:item:add', 'wms:item:edit']">操作</el-button>
 * 3. 路由权限检查：<el-button v-auth="'add'">按钮</el-button> （基于当前路由的authList）
 *
 * 权限检查优先级：
 * 1. 首先检查用户是否有直接的权限标识
 * 2. 如果没有，检查当前路由的authList
 * 3. 支持WMS专用权限常量
 */

interface AuthBinding extends DirectiveBinding {
  value: string | string[];
}

function checkAuthPermission(el: HTMLElement, binding: AuthBinding): void {
  const { value } = binding;

  if (!value) {
    console.warn("v-auth 指令缺少权限值");
    removeElement(el);
    return;
  }

  // 方式1：直接权限检查（推荐）
  // 支持完整权限标识如：'wms:item:add' 或权限数组
  if (checkPermission(value)) {
    return;
  }

  // 方式2：路由权限检查（向后兼容）
  // 如果直接权限检查失败，尝试检查当前路由的authList
  if (typeof value === "string" && checkRouteAuth(value)) {
    return;
  }

  // 没有权限，移除元素
  removeElement(el);
}

/**
 * 检查路由级权限
 * @param authMark 权限标识
 * @returns 是否有权限
 */
function checkRouteAuth(authMark: string): boolean {
  try {
    // 获取当前路由的权限列表
    const authList =
      (router.currentRoute.value.meta.authList as Array<{
        authMark: string;
      }>) || [];

    // 检查是否有对应的权限标识
    return authList.some((item) => item.authMark === authMark);
  } catch (error) {
    console.error("检查路由权限时发生错误:", error);
    return false;
  }
}

/**
 * 安全地移除DOM元素
 * @param el 要移除的元素
 */
function removeElement(el: HTMLElement): void {
  try {
    if (el.parentNode) {
      el.parentNode.removeChild(el);
    }
  } catch (error) {
    console.error("移除元素时发生错误:", error);
  }
}

const authDirective: Directive = {
  mounted: checkAuthPermission,
  updated: checkAuthPermission,
};

export function setupAuthDirective(app: App): void {
  app.directive("auth", authDirective);
}
